<template>
  <div class="searchWrapper">
    <div class="top">
      <span class="iconfont iconjiantou2" @click="back"></span>
      <div class="searchInput">
        <span class="iconfont iconsearch"></span>
        <input
          type="text"
          v-model="keyword"
          @keyup.enter="searchPost"
          v-focus
        />
      </div>
      <div class="search" @click="searchPost">搜索</div>
    </div>
    <div class="history" v-if="postList.length == 0">
      <h3>历史记录</h3>
      <div class="historyList">
        <div
          class="historyItem"
          v-for="(history, index) in historyList"
          :key="index"
          @click="handleClick(history)"
        >
          {{ history }}
        </div>
      </div>
    </div>

    <div class="post">
      <NewCategoryContent
        v-for="post in postList"
        :key="post.id"
        :postItem="post"
      />
    </div>
  </div>
</template>

<script>
// 导入新闻内容组件
import NewCategoryContent from "../components/NewCategoryContent";
export default {
  data() {
    return {
      keyword: "",
      postList: [],
      historyList: [],
    };
  },
  components: {
    NewCategoryContent,
  },
  mounted() {
    // 需要判断本地存储是否存在历史记录 针对新用户的情况，一开始是没有任何搜索的历史记录的
    if (localStorage.getItem("history")) {
      //每次进入搜索页面就从本地存储取出历史记录的数据 并且绑定到data的historyList
      this.historyList = JSON.parse(localStorage.getItem("history"));
      return;
    }
  },
  methods: {
    handleClick(historyKey) {
      // console.log("点击了历史记录的关键词");
      //点击历史的关键词 实现搜索 根据
      this.keyword = historyKey;
      // 根据点击的历史记录关键词 发送请求获取文章数据
      this.searchPost();
    },
    // 点击箭头回退
    back() {
      // 判断 如果是有新闻内容的回退 回退到搜索初始状态
      if (this.postList.length) {
        // 清空关键字
        this.keyword = "";
        // 显示历史记录
        this.postList = [];
        return;
      }
      this.$router.back();
    },
    searchPost() {
      // 如果用户输入为空点击搜索 不让他显示全部的新闻数据
      if (this.keyword == "") {
        // 代码终止执行 处理关键词为空不显示所有的新闻文章和本地存储的历史记录不存储空字符串的关键词
        return;
      }
      // 查询数组里面是否存在该关键词，不存在就加入到历史记录的数组
      if (this.historyList.indexOf(this.keyword) == -1) {
        // 点击搜索就将关键次存储到历史记录的前面
        this.historyList.unshift(this.keyword);
      }

      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        // console.log(res);
        // 获取的新闻列表数据存储data中
        this.postList = res.data.data;
      });
    },
  },
  watch: {
    // 监听数据变化
    keyword() {
      // 输入框数据为空显示搜索历史
      if (this.keyword === "") {
        this.postList = [];
      }
    },
    // 监听历史记录的数据变化
    historyList() {
      //每次历史记录的数据变化时存储到本地存储中 注意需要转为字符串再存储数据
      localStorage.setItem("history", JSON.stringify(this.historyList));
    },
  },
  directives: {
    focus: {
      inserted(dom) {
        dom.focus();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.searchWrapper {
  font-family: "Arial Normal", "Arial";
  .top {
    display: flex;
    align-items: center;
    padding: 10/360 * 100vw 20/360 * 100vw;
    .iconjiantou2 {
      font-size: 16/360 * 100vw;
      color: #333;
    }
    .searchInput {
      flex: 1;
      display: flex;
      align-items: center;

      padding: 0 14/360 * 100vw;
      margin: 0 10/360 * 100vw;
      border-radius: 20/360 * 100vw;
      border: 1px solid #e4e4e4;
      .iconsearch {
        padding-top: 2/360 * 100vw;
        font-size: 16/360 * 100vw;
        color: #888;
      }
      input {
        height: 36/360 * 100vw;
        width: 90%;
        line-height: 36/360 * 100vw;
        padding: 0 10/360 * 100vw;
        color: #333;
        font-size: 13/360 * 100vw;
        border: none;
        outline: none;
      }
    }
    .search {
      font-size: 14/360 * 100vw;
      color: #333;
      cursor: pointer;
    }
  }
  h3 {
    font-size: 16/360 * 100vw;
    padding: 0 20/360 * 100vw;
    margin: 10/360 * 100vw 0;
  }
  .historyList {
    margin: 0 20/360 * 100vw;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .historyItem {
      padding: 10/360 * 100vw 0;
      padding-right: 10/360 * 100vw;
      color: #333;
      font-size: 14/360 * 100vw;
      cursor: pointer;
    }
  }
}
</style>
